<template>
  <div class="home-container">
    <NavBar />
    <!-- 第一部分 -->
    <section
        id="section1"
        class="fullpage-section"
        :class="{ 'active': activeSection === 1 }"
        @click="scrollToSection(2)"
    >
      <div class="content">
        <h2>第一部分</h2>
        <p v-show="activeSection === 1" class="fade-in-text"><HeroSection /></p>
      </div>
    </section>

    <!-- 第二部分 -->
    <section
        id="section2"
        class="fullpage-section"
        :class="{ 'active': activeSection === 2 }"
        @click="scrollToSection(3)"
    >
      <div class="content">
        <h2>第二部分</h2>
        <p v-show="activeSection === 2" class="fade-in-text"><StatsSection /></p>
      </div>
    </section>

    <!-- 第三部分 -->
    <section
        id="section3"
        class="fullpage-section"
        :class="{ 'active': activeSection === 3 }"
        @click="scrollToSection(4)"
    >
      <div class="content">
        <h2>第三部分</h2>
        <p v-show="activeSection === 3" class="fade-in-text"><FeaturesSection /></p>
      </div>
    </section>

    <!-- 第四部分 -->
    <section
        id="section4"
        class="fullpage-section"
        :class="{ 'active': activeSection === 4 }"
    >
      <div class="content">
        <h2>第四部分</h2>
        <p v-show="activeSection === 4" class="fade-in-text">感谢浏览</p>
      </div>
    </section>



    <AppFooter />
  </div>

</template>
<style>
/* 基础样式 */
.home-container {
  position: relative;
  height: 100%;
}

.fullpage-section {
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  transition: background-color 0.5s ease;
}

.fullpage-section:nth-child(1) {
  background-color: #f8f9fa;
}
.fullpage-section:nth-child(2) {
  background-color: #e9ecef;
}
.fullpage-section:nth-child(3) {
  background-color: #dee2e6;
}
.fullpage-section:nth-child(4) {
  background-color: #ced4da;
}

.fullpage-section.active {
  background-color: #adb5bd;
}

.content {
  text-align: center;
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease;
}

.fullpage-section.active .content {
  opacity: 1;
  transform: translateY(0);
}

h2 {
  font-size: 3rem;
  font-weight: 300;
  color: #212529;
  margin-bottom: 1rem;
}

.fade-in-text {
  color: #495057;
  font-size: 1.2rem;
  animation: fadeIn 1.5s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 响应式调整 */
@media (max-width: 768px) {
  h2 {
    font-size: 2rem;
  }
}
</style>
<script>
import NavBar from '@/components/NavBar.vue'
import HeroSection from '@/components/HeroSection.vue'
import StatsSection from '@/components/StatsSection.vue'
import FeaturesSection from '@/components/FeaturesSection.vue'
import AppFooter from '@/components/AppFooter.vue'

export default {
  name: 'HomeView',
  components: {
    NavBar,
    HeroSection,
    StatsSection,
    FeaturesSection,
    AppFooter
  },
  data() {
    return {
      activeSection: 1,
      scrollDebounce: null
    }
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll)
    this.handleScroll() // 初始检测
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    handleScroll() {
      // 防抖处理
      if (this.scrollDebounce) clearTimeout(this.scrollDebounce)

      this.scrollDebounce = setTimeout(() => {
        const sections = document.querySelectorAll('.fullpage-section')
        const scrollPosition = window.scrollY + window.innerHeight / 2

        sections.forEach((section, index) => {
          const sectionTop = section.offsetTop
          const sectionHeight = section.offsetHeight

          if (scrollPosition >= sectionTop && scrollPosition < sectionTop + sectionHeight) {
            this.activeSection = index + 1
          }
        })
      }, 50)
    },
    scrollToSection(sectionNum) {
      const sectionId = `section${sectionNum}`
      const element = document.getElementById(sectionId)
      if (element) {
        window.scrollTo({
          top: element.offsetTop,
          behavior: 'smooth'
        })
      }
    }
  }
}
</script>
